<template>
    <diV class="person">
      <el-descriptions class="margin-top" title="管理员信息" :column="1" :size="size" border :data="tableData">
      <template slot="extra" >
          <el-button type="primary" @click="handleEdit(tableData)">编辑 <i class="el-icon-edit"></i></el-button>
      </template>
      
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          账号
        </template>
        {{ tableData.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-lock"></i>
          密码
        </template>
        {{ tableData.password }}
      </el-descriptions-item>
      
    </el-descriptions>
  
    <el-dialog title="管理员信息" :visible.sync="dialogFormVisible" width="30%" >
          <el-form label-width="80px" size="small">
            <el-form-item label="账号">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </div>
        </el-dialog>
    </diV>
  </template>
  
  <script>
  export default {
      data () {
        return {
          size: '',
          tableData:{
            id:'',
            name: '',
            password: '',
          },
          form: {},
          dialogFormVisible: false,
        };
      },
      created(){
        if(!this.$store.state.userInfo){
          this.$message.error("请登录后再进行管理！");
        }else{
          this.tableData = this.$store.getters.getUser
          console.log(this.tableData.id)
          this.load()
        }
        
      },
      methods: {
        load() {
          this.request.get("/admin/check/" + this.tableData.id).then((response) => {
            console.log(response)
            this.tableData = response.data.data.list
          })
        },
        save() {
          this.request.post("/admin/insert", 
          {
            id: this.form.id,
            name: this.form.name,
            password: this.form.password,
          }).then(response => {
            console.log(response)
            if (response.data.code === '200' || response.data.code === 200) {
              this.$message.success(" 保存成功 ")
              this.dialogFormVisible = false
              this.load()
            } else {
              this.$message.error(" 保存失败 ")
            }
          })
        },
        handleEdit(row) {
          this.form = row
          this.dialogFormVisible = true
        },
      }
  }
  </script>
  
  <style>
  .el-descriptions{
      text-align: center;
      margin: 0px auto;
      width: 400px;
      padding: 30px 35px 15px 35px;
  }
  </style>